<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="bg-purple">
            <el-link href="/user/#/" :underline="false">
              <img src="../assets/logo.png" alt="logo" class="logo" />
            </el-link>
            <span>个人中心</span>
            <el-link href="/user/#/" :underline="false" class="ml-20">
              <el-button type="primary">返回首页</el-button>
            </el-link>
          </div>
        </el-col>
        <el-col :span="6" :offset="10">
          <div class="bg-purple">
            <el-link
              style="float: right; margin-right: 80px; color: #fff"
              :underline="false"
              type="primary"
              @click="loginout"
              >退出</el-link
            >
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div class="content">
        <div class="wrap">
          <el-row :gutter="20" style="padding: 0px 20px">
            <!-- 左侧 -->
            <el-col :span="4">
              <el-card>
                <el-menu
                  :default-active="tabsindex"
                  @select="tabsSelect"
                  class="el-menu-vertical-demo"
                >
                  <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <template #title>基本信息</template>
                  </el-menu-item>
                  <el-menu-item index="2">
                    <i class="el-icon-setting"></i>
                    <template #title>修改密码</template>
                  </el-menu-item>
                  <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <template #title>登录日志</template>
                  </el-menu-item>
                </el-menu>
              </el-card>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="16">
              <el-card v-if="tabsindex === '1'">
                <el-form :model="userDataForm" label-width="120px">
                  <el-form-item label="注册手机" class="color_withe">
                    <el-input v-model="userDataForm.username" disabled />
                  </el-form-item>
                  <el-form-item label="头像">
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadUrl"
                      :show-file-list="false"
                      :on-success="handleAvatorSuccess"
                      :before-upload="beforeAvatorUpload"
                      name="upload"
                    >
                      <img
                        v-if="userDataForm.avatar"
                        :src="domain + userDataForm.avatar"
                        class="avatar"
                      />
                      <el-icon v-else class="avatar-uploader-icon"
                        ><Plus
                      /></el-icon>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="userDataForm.nickname" />
                  </el-form-item>
                  <el-form-item label="姓名">
                    <el-input v-model="userDataForm.truename" />
                  </el-form-item>
                  <el-form-item label="联系手机">
                    <el-input v-model="userDataForm.mobile" />
                  </el-form-item>
                  <el-form-item label="联系邮箱">
                    <el-input v-model="userDataForm.email" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="modifyinfo"
                      >Save</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card v-else-if="tabsindex === '2'">
                <el-form :model="userPasswordForm" label-width="120px">
                  <el-form-item label="原密码">
                    <el-input v-model="userPasswordForm.password" />
                  </el-form-item>
                  <el-form-item label="新密码">
                    <el-input v-model="userPasswordForm.newpassword" />
                  </el-form-item>
                  <el-form-item label="确认密码">
                    <el-input v-model="userPasswordForm.repassword" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="modifypasswd"
                      >Save</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card v-else-if="tabsindex === '3'">
                <el-table :data="logData" border style="width: 100%">
                  <el-table-column prop="loginip" label="登陆IP" />
                  <el-table-column prop="logintime" label="登陆时间" />
                  <el-table-column label="状态" align="center">
                    <template #default="scope">
                      <!-- <el-tag>{{ scope.row.status == 0 ? "失败" : "成功" }}</el-tag> -->
                      <el-tag type="success" v-if="scope.row.status == 0"
                        >success</el-tag
                      >
                      <el-tag type="warning" v-else>fail</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="text-center" style="margin-top: 30px">
                  <el-pagination
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    v-model:current-page="pageIndex"
                    v-model:page-size="pageSize"
                    :total="totalCount"
                    :page-sizes="pageSizes"
                    :hide-on-single-page="hideOnSinglePage"
                  ></el-pagination>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
    <el-footer>
      <div class="text-center">
        <span>版权所有：xxxxxxxxxxxxx Copyright ©1995-2023</span>
        <a
          href="http://beian.miit.gov.cn/"
          target="_blank"
          style="margin-left: 40px; color: #709eef"
          >京ICP备xxxxxxxxx号-x</a
        >
      </div>
    </el-footer>
  </el-container>
</template>
<script lang="js">
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: "",
  data() {
    return {
      token: "",
      tabsindex: "1",
      uploadUrl: "",
      userDataForm: {
        username: "",
        nickname: "",
        truename: "",
        avatar: "",
        email: "",
        mobile: "",
      },
      userPasswordForm: {
        password: "",
        newpassword: "",
        repassword: "",
      },
      background: true,
      hideOnSinglePage: false,
      logData: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      pageSizes: [10, 30, 100]
    }
  },
  components: {Plus, ElMessage},
  computed: {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 是否登录
      this.token = window.sessionStorage.getItem("token")
      if (!this.token) {
        this.$router.push({ path: "/login" });
      }
      // 拼接图片上传需要的 token
      this.uploadUrl = "/api/member/uploadImage?token=" + this.token
      // 获取用户信息
      this.$http.get("/member/userinfo", {}, (res) => {
          if (res && res.code === 0) {
            let userinfo = res.data
            this.userDataForm.username = userinfo.username
            this.userDataForm.nickname = userinfo.nickname
            this.userDataForm.truename = userinfo.truename
            this.userDataForm.mobile = userinfo.mobile
            this.userDataForm.email = userinfo.email
            this.userDataForm.avatar = userinfo.avatar
          }
      })
    },
    // 目录选择
    tabsSelect (index) {
      this.tabsindex = index
      if (index === '3') {
        this.logList()
      }
    },
    // 标题图上传成功
    handleAvatorSuccess(res, uploadFile) {
      // console.log(res);
      if (res.uploaded === 1) {
        this.userDataForm.avatar = res.url
      } else {
        ElMessage.error(res.msg)
      }
    },
    // 上传前检测
    beforeAvatorUpload(rawFile) {
      if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("Avatar picture must be JPG or PNG format!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("Avatar picture size can not exceed 2MB!");
        return false;
      }
      return true;
    },
    // 修改信息
    modifyinfo () {
      this.$http.post("/member/modifyinfo", this.userDataForm, (res) => {
        if (res && res.code === 0) {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1500
          })
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 修改密码
    modifypasswd () {
      this.$http.post("/member/password", this.userPasswordForm, (res) => {
        if (res && res.code === 0) {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1500
          });
          window.sessionStorage.clear()
          this.$router.push({ path: "/login" })
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 获取登录日志
    logList() {
      this.$http.get("/member/loglist", {
        page: this.pageIndex,
        limit: this.pageSize,
      }, (res) => {
        if (res && res.code === 0) {
          this.logData = res.data.data
          this.totalCount = res.data.total
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 登出
    loginout() {
      window.sessionStorage.clear()
      this.$router.push({ path: "/login" });
    }
  },
  watch: {
    pageIndex: "logList",
    pageSize: "logList"
  },
};
</script>

<style scoped lang="scss">
.ml-20 {
  margin-left: 20px;
}
.el-header {
  line-height: 60px;
  background-color: #f1acac;
  .logo {
    width: 60px;
    height: 60px;
  }
}
.el-main {
  padding: 0px;
  .content {
    margin-top: 30px;
    .wrap {
      margin: 0 auto;
      width: 1300px;
    }
  }
}
.el-menu-vertical-demo {
  border-right: none;
}
.btn {
  padding: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  margin-left: 20px;
  transition: 0.3s all;
}
.btn:hover {
  border: 1px solid #ff9900;
}
.border_ccc {
  padding: 20px;
  border: 1px solid #ccc;
}
.el-footer {
  color: #fff;
  line-height: 60px;
  margin-top: 60px;
  background-color: #393b3f;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.ck-editor__editable_inline {
  height: 400px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>



